<template>
    <div class="login-box">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <h3>欢迎登录</h3>
        <el-form-item label="账号" prop="name">
          <el-input v-model="form.name" placeholder="请输入账号" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password"  >
          <el-input type="password" v-model="form.password" placeholder="请输入密码" ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="checkCode">
          <el-input id="code" class="code" type="text" v-model="form.checkCode" placeholder="请输入验证码"></el-input>
          <el-image class="codeImg" :src="src" @click="getCode()"></el-image>
        </el-form-item>

        <div>
         
                          
<!-- 
                          <div class="demo-image__placeholder">
                            <div class="block">
                              <span class="demonstration">验证码</span>
                              <el-input v-model="input" placeholder="验证码"></el-input>
                              <el-image :src="src" @click="getCode()"></el-image>
                            </div>
                          
                          </div>   -->

         
                                  
        </div>
         
        <el-form-item>
          <el-checkbox v-model="checked" >自动登录</el-checkbox>
          <el-button type="primary" @click="onSubmit('form')">登录</el-button>
         <el-button type="primary" @click="onRegist()">注册</el-button>
        </el-form-item>
      </el-form>
           
    </div>
    

  
  
</template>

<script>
export default {
    name: "Login",
    data(){
      return{
        form:{
          name:'',
          password:'',
          checkCode: '',
          
        },
        rules:{

          password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
          ]
        },
        checked: false,
        src: '',
      }

    },
    methods:{
      onSubmit(formName){
        this.$refs[formName].validate((valid) => {
         // var vm = this;
          if (valid) {

            let data = {
                name:this.form.name,
                password:this.form.password
            }
            this.$http.post("login/doLogin",data,(resp)=>{
               if(resp.data.errno==0){

                //登录成功，要向vuex中存放user对象
                var user  = resp.data.data;
                this.$store.dispatch('asyncUpdateUser', user);
                this.$router.push("/Home")
                this.$message({
                  message: this.$store.getters.getUser.name+'登录成功',
                  type: 'success'
                });
                // setTimeout(function(){
                //   this.$router.push("/Home")
                // },2000)
              }else{
                this.$message.error('用户名或密码错误');
              }
            })






            // 发送axios请求
            // this.axios({
            //   method:'post',
            //   url:'http://localhost:9000/login/doLogin?',
            //   data:{
            //     name:vm.form.name,
            //     password:vm.form.password
            //   }
            // }).then(function(resp){
            // //   console.log(resp)
            //   if(resp.data.errno==0){

            //     //登录成功，要向vuex中存放user对象
            //     var user  = resp.data.data;
            //     vm.$store.dispatch('asyncUpdateUser', user);
            //     vm.$message({
            //       message: vm.$store.getters.getUser.name+'登录成功',
            //       type: 'success'
            //     });
            //     setTimeout(function(){
            //       vm.$router.push("/Home")
            //     },2000)
            //   }else{
            //     vm.$message.error('用户名或密码错误');
            //   }
            // })

          } else {
            this.$message.error('用户名或密码格式错误');
            return false;
          }
        });
      },
      getCode(){
        this.$http.get('login/getCode',{},(resp)=>{
           console.log(resp)
             if(resp.data.errno==0){
                console.log("获取验证码成功")
              this.src = resp.data.data;
                console.log(vr.src)

              }else{
                console.log("获取验证码失败")
                vm.$message.error('获取验证码失败');
              }
          })

         var vr = this;
         // 发送axios请求
            // this.axios({
            //   method:'get',
            //   url:'http://localhost:9000/login/getCode?',
          
            // }).then(function(resp){
            //   console.log(resp)
            //   if(resp.data.errno==0){
            //     console.log("获取验证码成功")
            //   vr.src = resp.data.data;
            //     console.log(vr.src)

            //   }else{
            //     console.log("获取验证码失败")
            //     vm.$message.error('获取验证码失败');
            //   }
            // })
      },
      onRegist(){

         this.$router.push("/Regist")
      },
      getCheckBoxStatus(){
          //  alert("是否勾选:"+this.checked) 
      }
    },
      //生命周期-挂载完成（可以访问DOM 元素）
  mounted() {
this.getCheckBoxStatus();
    this.getCode();
    
    
  }
}
</script>

<style scoped>
  .login-box{
    width: 500px;
    height: 300px;
    border: 1px solid #DCDFE6;
    margin: 150px auto;
    padding: 20px 50px 20px 30px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px #DCDFE6;
  }
#code{
  width: 100px;
}
.code{
  width: 150px;
  margin-top: -150px;
  margin-left: -70px;
}
.codeImg{
}
</style>
